<template>
  <a-config-provider :locale="locale" :get-popup-container="popContainer">
    <router-view/>
  </a-config-provider>
</template>

<script>
import {enquireScreen} from './utils/util'
import {mapState, mapMutations} from 'vuex'
import themeUtil from '@/utils/themeUtil';
import {getI18nKey} from '@/utils/routerUtil'

export default {
  name: 'App',
  data() {
    return {
      locale: {}
    }
  },
  created () {
    this.setHtmlTitle()
    this.setLanguage(this.lang)
    enquireScreen(isMobile => this.setDevice(isMobile))
  },
  mounted() {

   this.setWeekModeTheme(this.weekMode)
  },
  watch: {
    weekMode(val) {
      this.setWeekModeTheme(val)
    },
    lang(val) {
      this.setLanguage(val)
      this.setHtmlTitle()
    },
    $route() {
      this.setHtmlTitle()
    },
    'theme.mode': function(val) {
      let closeMessage = this.$message.loading(`您选择了主题模式 ${val}, 正在切换...`)
      themeUtil.changeThemeColor(this.theme.color, val).then(closeMessage)
    },
    'theme.color': function(val) {
      let closeMessage = this.$message.loading(`您选择了主题色 ${val}, 正在切换...`)
      themeUtil.changeThemeColor(val, this.theme.mode).then(closeMessage)
    },
    'layout': function() {
      window.dispatchEvent(new Event('resize'))
    }
  },
  computed: {
    ...mapState('setting', ['layout', 'theme', 'weekMode', 'lang'])
  },
  methods: {
    ...mapMutations('setting', ['setDevice']),
    setWeekModeTheme(weekMode) {
      if (weekMode) {
        document.body.classList.add('week-mode')
      } else {
        document.body.classList.remove('week-mode')
      }
    },
    setLanguage(lang) {
      this.$i18n.locale = lang
      switch (lang) {
        case 'CN':
          this.locale = require('ant-design-vue/es/locale-provider/zh_CN').default
          break
        case 'HK':
          this.locale = require('ant-design-vue/es/locale-provider/zh_TW').default
          break
        case 'US':
        default:
          this.locale = require('ant-design-vue/es/locale-provider/en_US').default
          break
      }
    },
    setHtmlTitle() {
      const route = this.$route
      const key = route.path === '/' ? 'home.name' : getI18nKey(route.matched[route.matched.length - 1].path)
      document.title = process.env.VUE_APP_NAME + ' | ' + this.$t(key)
    },
    popContainer() {
      return document.getElementById("popContainer")
    }
  }
}
</script>

<style lang="less">
.ant-table-wrapper{
  //min-height: 00px;
}
.ant-table-placeholder{
  background: #0f1333 !important;
  min-height: 700px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.ant-table-thead > tr > th, .ant-table-tbody > tr > td{
  padding:15px 20px !important;
}
body{
  background-color: #0f1333 !important;
}
.admin-header{
  z-index:9 !important;
}
.tabs-view-content{
  height: 100%;
}
.tabs-view-content.head.fixed,.page-header.head.fixed,.page-content.head.fixed{
  width: 100% !important;
  max-width:100% !important;
}
  #id{
  }
  .ant-menu-submenu-title span{
    color: #fff !important;
  }
  .ant-menu-dark .ant-menu-sub {
    background: #fff !important;
  }
  .ant-menu-submenu{
    color: #fff !important;
  }
  .ant-menu-item > a {
    color: #000 !important;
  }
  .ant-menu-item-active>a{
    color: #AC2222 !important;
  }
  .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected{
    background-color: #fff !important;
  }
  .ant-menu-submenu .ant-menu-item-selected > a{
    color: #AC2222 !important;
  }
  .ant-dropdown-menu{
    background-color: #fff !important;
  }
.avatar-menu .ant-dropdown-menu-item, .ant-menu-submenu .ant-dropdown-menu-item{
    color: #000 !important;
  }
  .ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover {
    background-color: #fff !important;
  }
  .ant-layout,.ant-layout-footer{
    background:#0f1333 !important;
  }
  .page-header{
    background: none !important;
    padding: 0 !important;
  }
.page-content{
  padding-top: 0 !important;
}
.ant-menu.ant-menu-dark .ant-menu-item-selected, .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
  background: none !important;
}
.head-menu .ant-menu-item > a{
  color: #fff !important;
}
.ant-menu-item-selected >a,.ant-menu-submenu-selected span{
  position: relative;
  display: block;
}
.ant-menu-item-selected >a::after{
  content: '';
  width: 100%;
  height: 4px;
  background-color: #fff;
  display: inline-block;
  position: absolute;
  bottom: 4px;
  left: 0;
  border-radius: 3px;
}
.ant-menu-submenu-selected span::after{
  content: '';
  width: 100%;
  height: 4px;
  background-color: #fff;
  display: inline-block;
  position: absolute;
  bottom: 4px;
  left: 0;
  border-radius: 3px;
}
.ant-card{
  background: #2C3360 !important;
  border: 0 !important;
}
.ant-table-thead > tr > th{
  background: #363E71 !important;
}
.ant-table-tbody > tr > td{
  background-color: #42487A !important;
  border-bottom: 1px solid #373C63 !important;
}
</style>
